<!--
 @description 经销商分店关店-编辑
 @fileName Add.vue
 @author zengqiongying
 @created 2023-04-27 19:31:42
-->
<template>
  <div class="has-foot-pb">
    <Card>
      <Cell title="门店名称" defaultValue="--" readonly custom>{{ detail.name }}</Cell>
      <Cell title="详细地址" defaultValue="--" readonly custom>{{ detail.shopAddr }}</Cell>
      <Cell title="门店经营面积(㎡)" :modelValue="detail.operateArea" defaultValue="--" readonly />
      <Cell title="门店经营业务类型" is-column custom readonly>
        <Tags :list="businessTypeNames" />
      </Cell>
    </Card>

    <Card>
      <Cell title="是否关店" custom :right="false" :border="false">
        <qmp-switch v-model="formData.isChange" :active-value="1" :inactive-value="0">
          <template #background>
            <span class="qmp-switch__background"> {{ [1, '1'].includes(formData.isChange) ? '是' : '否' }}</span>
          </template>
        </qmp-switch>
      </Cell>
      <Cell
        v-if="[1, '1'].includes(formData.isChange)"
        title="关店原因"
        is-column
        custom
        divider
        :right="false"
        required
      >
        <qmp-field v-model="formData.closeReason" type="textarea" placeholder="输入关店原因" class="ctm-text-area" />
      </Cell>
      <Cell v-if="[1, '1'].includes(formData.isChange)" title="关店附件" is-column custom :right="false">
        <!-- :required="formData.isChange" -->
        <AttachmentUpload v-model="shutAttrFileList" :objectId="detail.id" type-code="ACCESS069" />
      </Cell>
    </Card>

    <Card v-if="[1, '1'].includes(formData.isChange)">
      <!-- <Cell title="门店是否交接" custom :right="false" :border="false">
        <qmp-switch v-model="formData.isMarketConnect" :active-value="1" :inactive-value="0">
          <template #background>
            <span class="qmp-switch__background"> {{ formData.isMarketConnect === 1 ? '是' : '否' }}</span>
          </template>
        </qmp-switch>
      </Cell> -->
      <FieldSelect
        v-model="formData.isMarketConnect"
        title="门店是否交接"
        label-name="dictName"
        value-name="dictCode"
        :optionData="[
          { dictName: '是', dictCode: '1' },
          { dictName: '否', dictCode: '0' }
        ]"
        required
        clear
      />
      <Cell
        v-if="[1, '1'].includes(formData.isMarketConnect)"
        title="交接证明附件"
        sub-title="门店如果交接，则需要提交交接附件"
        is-column
        custom
        :right="false"
        :required="[1, '1'].includes(formData.isMarketConnect)"
      >
        <AttachmentUpload v-model="handoverAttrFileList" :objectId="detail.id" type-code="ACCESS070" />
      </Cell>
    </Card>

    <div class="ctm-content-foot">
      <div class="btn radius-larg ctm-btn-main" @click="onSave">保存</div>
    </div>
  </div>
</template>

<script lang="ts">
  import { reactive, toRefs, getCurrentInstance, nextTick, computed, onUnmounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import Card from '@/components/Card/index.vue'
  import AttachmentUpload from '@/components/AttachmentUpload/index.vue'
  import Cell from '@/components/Cell/index.vue'
  import Tags from '@/components/Tags/index.vue'
  import FieldSelect from '@/components/FieldSelect/index.vue'
  import { saveShopInfo } from '@/apis/ctmCustomerChange/index'

  interface anyObjectModle {
    [key: string]: any
  }
  export default {
    name: 'DealerShutUpShopEditShop',
    components: { Card, Tags, Cell, FieldSelect, AttachmentUpload },
    setup() {
      const { proxy }: any = getCurrentInstance()
      const $router = useRouter()
      const $route = useRoute()
      const datas = reactive<anyObjectModle>({
        id: $route.query.id || '',
        detail: {},
        formData: {
          isChange: 0,
          closeReason: '',
          isMarketConnect: ''
        },
        shutAttrFileList: [], // 关店附件
        handoverAttrFileList: [] // 交接附件
      })
      const businessTypeNames = computed(() => {
        if (datas.detail.businessTypeName) {
          return datas.detail.businessTypeName.split(',')
        } else {
          return []
        }
      })

      const getFormData = () => {
        const { formData }: any = datas
        let data: anyObjectModle = {
          isChange: [1, '1'].includes(formData.isChange) ? 1 : 0,
          closeReason: [1, '1'].includes(formData.isChange) ? formData.closeReason : '',
          isMarketConnect: [1, '1'].includes(formData.isMarketConnect) ? 1 : 0
        }
        data.attachmentDTOS = [...datas.shutAttrFileList, ...datas.handoverAttrFileList]
        return data
      }

      const onSave = () => {
        const data: anyObjectModle = getFormData()
        /* if ([1, '1'].includes(data.isChange) && datas.shutAttrFileList.length === 0) {
          proxy.$toast('请上传关店附件')
          return
        } */

        if ([1, '1'].includes(data.isChange) && [undefined, null, ''].includes(data.closeReason)) {
          proxy.$toast('请输入关店原因')
          return
        }

        if ([1, '1'].includes(data.isMarketConnect) && datas.handoverAttrFileList.length === 0) {
          proxy.$toast('请上传交接证明附件')
          return
        }
        const newData = { ...datas.detail, ...data }
        saveShopInfo(newData).then((res: any) => {
          if (res.success === 1) {
            proxy.$toast('保存成功')
            proxy.$SimpleEvents.emit('ShutUpShopUpdateShopInfo', newData)
            nextTick(() => {
              $router.goBack()
            })
          }
        })
      }

      const getDetail = () => {
        let d: any = {}
        try {
          const info: any = localStorage.getItem('shutShopInfo')
          d = JSON.parse(info)
        } catch {}
        if (d.code) {
          datas.detail = d
          datas.formData.isChange = [1, '1'].includes(d.isChange) ? 1 : 0
          datas.formData.isMarketConnect = [1, '1', '0', 0].includes(d.isMarketConnect) ? `${d.isMarketConnect}` : ''
          datas.formData.closeReason = d.closeReason
        }
      }
      onUnmounted(() => {
        localStorage.removeItem('shutShopInfo')
      })

      getDetail()
      return {
        ...toRefs(datas),
        businessTypeNames,
        onSave
      }
    }
  }
</script>
<style lang="less" scoped>
  .shop-list {
    padding: 0 16px;
    /deep/ .qmp-checkbox__label {
      flex: 1;
    }
    .shop-item {
      padding: 16px 0;
      position: relative;
      &.has-pr {
        padding-right: 56px;
      }
      .title {
        margin-bottom: 2px;
        font: var(--font-main-title-strengthen);
        color: var(--texticon-default-strong);
      }
      .address {
        font: var(--font-main-title-body);
        color: var(--texticon-default-strong);
      }
      .btn-edit {
        position: absolute;
        z-index: 9;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        background-image: url(~@/assets/images/edit-line.png);
        background-size: 24px 24px;
        background-repeat: no-repeat;
      }
    }
  }
</style>
